<template>
  <view class="danmaku-container">
    <view
      v-for="(item, index) in danmakuList"
      :key="index"
      class="danmaku-item"
      :style="{
        top: item.top + 'px',
        animationDuration: item.duration + 's',
        animationDelay: item.delay + 's'
      }"
    >
      {{ item.content }}
    </view>
  </view>
</template>

<script>
export default {
  name: 'Danmaku',
  props: {
    // 弹幕内容列表
    messages: {
      type: Array,
      default: () => []
    },
    // 弹幕容器高度
    containerHeight: {
      type: Number,
      default: 300
    },
    // 弹幕行高
    lineHeight: {
      type: Number,
      default: 30
    }
  },
  data() {
    return {
      danmakuList: [], // 当前显示的弹幕列表
      maxLines: 0, // 最大可显示行数
      pool: [], // 弹幕对象池
      isRunning: true // 弹幕系统运行状态
    };
  },
  watch: {
    messages: {
      handler(newVal) {
        if (newVal.length > 0) {
          this.addDanmaku(newVal[newVal.length - 1]);
        }
      },
      deep: true
    }
  },
  created() {
    // 计算最大可显示行数
    this.maxLines = Math.floor(this.containerHeight / this.lineHeight);
    // 初始化对象池
    this.initPool();
  },
  methods: {
    // 初始化对象池
    initPool() {
      const poolSize = this.maxLines * 2; // 对象池大小为最大行数的两倍
      for (let i = 0; i < poolSize; i++) {
        this.pool.push({
          content: '',
          top: 0,
          duration: 0,
          delay: 0,
          active: false
        });
      }
    },
    // 从对象池获取一个弹幕对象
    getDanmakuFromPool() {
      return this.pool.find(item => !item.active);
    },
    // 生成随机数
    random(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    // 添加新弹幕
    addDanmaku(message) {
      if (!this.isRunning) return;
      
      const danmaku = this.getDanmakuFromPool();
      if (!danmaku) return; // 对象池已满

      // 随机生成弹幕位置和动画参数
      danmaku.content = message;
      danmaku.top = this.random(0, this.maxLines - 1) * this.lineHeight;
      danmaku.duration = this.random(8, 12); // 随机动画持续时间8-12秒
      danmaku.delay = this.random(0, 2); // 随机延迟0-2秒
      danmaku.active = true;

      this.danmakuList.push(danmaku);

      // 动画结束后回收到对象池
      setTimeout(() => {
        const index = this.danmakuList.indexOf(danmaku);
        if (index > -1) {
          this.danmakuList.splice(index, 1);
          danmaku.active = false;
        }
      }, (danmaku.duration + danmaku.delay) * 1000);
    },
    // 暂停弹幕
    pause() {
      this.isRunning = false;
    },
    // 继续播放弹幕
    resume() {
      this.isRunning = true;
    },
    // 清空弹幕
    clear() {
      this.danmakuList = [];
      this.pool.forEach(item => {
        item.active = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.danmaku-container {
  position: relative;
  width: 100vw;
  height: 300px;
  overflow: hidden;
}

.danmaku-item {
  position: absolute;
  right: -100%;
  white-space: nowrap;
  color: #fff;
  font-size: 24rpx;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  animation: danmaku-move linear forwards;
  will-change: transform;
}

@keyframes danmaku-move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
</style>